import {
  IFormProps,
  size,
  formItemLayout,
  getUploadResult,
  productPage,
  getImages,
  getFileList
} from "../../utils/common";
import React from "react";
import {
  Modal,
  Form,
  Input,
  Select,
  Upload,
  Checkbox,
  InputNumber
} from "antd";
import * as api from "../../api/api";
import { FormComponentProps } from "antd/lib/form";
import Uploads from "../Uploads";
const TextArea = Input.TextArea;
export interface IPointRuleEditProps extends FormComponentProps {
  visible: boolean;
  pointRule?: api.SingleUserMallMallVOPointRulesVO;
  onSave: (any) => void;
  onCancel: () => void;
}
class PointRuleEdit extends React.PureComponent<IPointRuleEditProps, any> {
  constructor(props) {
    super(props);
  }

  state = {
    userRuleLevel: ""
  };

  componentDidMount() {
    const userRuleLevel =
      this.props.pointRule && this.props.pointRule.userRuleLevel;
    this.setState({ userRuleLevel: userRuleLevel });
  }

  ok = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, form) => {
      if (!err) {
        this.props.onSave(form);
      }
    });
  };

  cancel = () => {
    this.props.onCancel();
  };

  levelChange = value => {
    this.setState({ userRuleLevel: value });
  };

  render(): JSX.Element {
    const { getFieldDecorator } = this.props.form;
    const { pointRule } = this.props;
    const { userRuleLevel } = this.state;
    return (
      <Modal
        title="体验金奖励规则"
        visible={this.props.visible}
        onOk={this.ok}
        onCancel={this.cancel}
        maskClosable={true}
      >
        <Form>
          <Form.Item label="针对用户等级" {...formItemLayout}>
            {getFieldDecorator("userRuleLevel", {
              initialValue: userRuleLevel
            })(
              <Select onChange={this.levelChange} disabled>
                <Select.Option value={0}>普通会员</Select.Option>
                <Select.Option value={1}>VIP会员</Select.Option>
                <Select.Option value={2}>合伙人</Select.Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item label="分享可得金额(元)" {...formItemLayout}>
            {getFieldDecorator("sharePoint", {
              initialValue: pointRule && pointRule.sharePoint
            })(<InputNumber placeholder="请输入金额" min={0} />)}
          </Form.Item>
          <Form.Item label="直推合伙人可得(元)" {...formItemLayout}>
            {getFieldDecorator("directUserToSuperVIP", {
              initialValue: pointRule && pointRule.directUserToSuperVIP
            })(<InputNumber placeholder="请输入金额" min={0} />)}
          </Form.Item>
          {userRuleLevel == "1" || userRuleLevel == "2" ? (
            <Form.Item label="直推VIP可得(元)" {...formItemLayout}>
              {getFieldDecorator("directUserToVIP", {
                initialValue: pointRule && pointRule.directUserToVIP
              })(<InputNumber placeholder="请输入金额" min={0} />)}
            </Form.Item>
          ) : (
            undefined
          )}
          {userRuleLevel == "1" || userRuleLevel == "2" ? (
            <Form.Item label="直推返还比例" {...formItemLayout}>
              {getFieldDecorator("directUserRate", {
                initialValue: pointRule && pointRule.directUserRate
              })(<InputNumber placeholder="请输入比例" min={0} max={1} />)}
            </Form.Item>
          ) : (
            undefined
          )}
          {userRuleLevel == "2" ? (
            <Form.Item label="VIP团队返还比例" {...formItemLayout}>
              {getFieldDecorator("vipGroupRate", {
                initialValue: pointRule && pointRule.vipGroupRate
              })(<InputNumber placeholder="请输入比例" min={0} max={1} />)}
            </Form.Item>
          ) : (
            undefined
          )}
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(PointRuleEdit);
